<template>
  <div class="app-container">
    <!-- 基础信息 -->
    <h5 class="titleInfo">基础信息</h5>
    <el-form
      ref="form" 
      class="form"
      :rules="rules"
      :model="form"
      label-width="130px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="昵称">
            <span class="spanToInput">{{ form.nickname | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码">
            <span class="spanToInput">{{ form.username | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名">
            <span class="spanToInput">{{ form.realname | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件号码">
            <span class="spanToInput">{{ form.identity }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推荐人姓名">
            <span class="spanToInput">{{ form.refereeName | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推荐人手机号">
            <span class="spanToInput">{{
              form.refereePhone | filterNull
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="级别">
            <el-select v-model="form.roleId" placeholder="请选择">
              <el-option
                v-for="item in roleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- {{typeOptions}} -->
          <el-form-item label="账号类型">
            <el-select v-model="form.accountType" placeholder="请选择">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 1.2.1再加上 -->
        <el-col :span="12" v-if="form.roleId >= 7">
          <el-form-item label="是否立即生效">
            <el-radio-group v-model="form.takeEffect">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <div v-if="(radio == 0) & (form.roleId >= 7)">
            <el-form-item label="生效日期">
              <el-date-picker
                v-model="form.intoTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                type="datetime"
                placeholder="选择日期时间"
              />
            </el-form-item>
          </div>
        </el-col>
        <!--试用的-->
        <div v-if="form.accountType == 4">
          <el-col :span="12">
            <el-form-item label="考虑开始时间" prop="thinkStartTime">
              <el-date-picker
                v-model="form.thinkStartTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考虑结束时间" prop="thinkEndTime">
              <el-date-picker
                v-model="form.thinkEndTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="试用结束时间" prop="trialEndTime">
              <el-date-picker
                v-model="form.trialEndTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </div>

        <el-col :span="12">
          <el-form-item label="地区">
            <el-cascader
              v-model="form.areas"
              placeholder="请选择省市"
              :options="options"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签约类型" prop="signType">
            <el-radio v-model="form.signType" :label="1">赠送</el-radio>
            <el-radio v-model="form.signType" :label="2">购买</el-radio>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 联创信息 -->
      <div v-if="form.accountType == 7">
        <div class="divBar" />
        <h5 class="titleInfo">联创信息</h5>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="推荐渠道"
              :prop="form.accountType == 7 ? 'recommendId' : ''"
            >
              <el-select v-model="form.recommendId" placeholder="请选择">
                <el-option
                  v-for="item in payOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="认购分公司"
              :prop="form.accountType == 7 ? 'subscriptionId' : ''"
            >
              <el-select v-model="form.subscriptionId" placeholder="请选择">
                <el-option
                  v-for="(item, index) in provinceOfficeList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="认购金额"
              :prop="form.accountType == 7 ? 'subscriptionAmount' : ''"
            >
              <el-input v-model="form.subscriptionAmount" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="上传合同"
              :prop="form.accountType == 7 ? 'contractImg' : ''"
            >
              <newUpload
                ref="contractImg"
                type="file"
                :file-list="contractImg"
                :file-num="5"
                accept="jpeg、JPG、jpg、png"
              />
              <p>
                请上传合同，最多允许上传5个附件，支持格式：jpeg、JPG、jpg、png
              </p>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <el-form-item>
        <el-button
          style="margin-top:30px"
          type="primary"
          @click="submitFn('form')"
          >立即提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import newUpload from "@/components/imgUpload/index";
import { companyList } from "@/api/branchOfficeDropDown";
import { provinceOfficeList } from "@/api/provinceOfficeList";
import {
  getList,
  getInfo,
  modifyUserServerRoleDetail,
  modifyUserServerRole
} from "@/api/designerManage";
export default {
  name: "AdjustLevel",
  components: {
    newUpload
  },
  filters: {
    filterNull(e) {
      if (!e) {
        return "暂无";
      } else {
        return e;
      }
    },
    // 时间戳转化
    dateFilter(e) {
      if (e != 0) {
        return new Date(Number(e) * 1000).format("yyyy-MM-dd hh:mm:ss");
      } else {
        return "";
      }
    }
  },
  data() {
    return {
      payOption: [],
      provinceOfficeList: [],
      rules: {
        contractImg: [
          {
            required: true,
            message: "上传合同图片",
            trigger: "blur"
          }
        ],
        signType: [
          { required: true, message: "请输入签约类型", trigger: "blur" }
        ],
        recommendId: [
          { required: true, message: "请输入推荐渠道分公司ID", trigger: "blur" }
        ],
        subscriptionId: [
          { required: true, message: "请输入认购分公司ID", trigger: "blur" }
        ],
        subscriptionAmount: [
          { required: true, message: "请输入认购金额", trigger: "blur" }
        ]
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      contractImg: [],
      form: {
        contractImg: []
      },
      list: {},
      userId: null,
      options: [],
      roleOptions: [],
      typeOptions: [],
      submitForm: {
        province: null,
        city: null,
        area: null
      },
      radio: 0
    };
  },
  watch: {
    "form.accountType"(val) {
      // if (val == "4") {
      //   this.form.roleId = "2";
      // }
      if (val == 0 || !val) {
        this.form.accountType = "";
      }
    },
    // "form.roleId"(val) {
    //   if (val != "2") {
    //     this.form.accountType = "";
    //   }
    // },
    "form.intoTime"(val) {
      // console.log(val);
      if (!val || val == 0) {
        this.form.intoTime = "";
      }
    },
    "form.takeEffect"(val){
      console.log(val)
      this.radio=val
    }
  },
  inject: ["reload"],
  created() {
    this.form = JSON.parse(this.$route.query.userId);
    this.userId = this.form.userId;
  },
  mounted() {
    this.getCompanyList();
    this.getInfo();
    // 省市区数据获取
    var addData = require("../../../../static/address/area.json");
    this.options = addData;
    // 获取级别
    this.roleOptions = window.helper.roleFn("listReturn");
    // 账户类型
    this.typeOptions = window.helper.accountType("listReturn");
  },
  methods: {
    // 获取分公司列表
    async getCompanyList() {
      companyList()
        .then(res => {
          const resData = res.data.data;
          const newData = [];
          resData.forEach(e => {
            newData.push({
              value: e.id,
              label: e.name
            });
          });
          this.payOption = newData;
        })
        .catch(error => {
          this.$message.error(error);
        });
      const res = await provinceOfficeList({ types: [0] });
      if (res.data.code == 0) {
        this.provinceOfficeList = res.data.data;
      } else {
        this.$message.error(res.data.msg);
      }
    },
    getInfo() {
      const datas = {
        userId: this.form.userId
      };
      modifyUserServerRoleDetail(datas)
        .then(res => {
          if (res.data.code == 0) {
            this.form = res.data.data;
            //不反显时间
            this.form.intoTime = "";
            // console.log(this.form);
            this.form.areas = [
              this.form.provinceId,
              this.form.cityId,
              this.form.areaId
            ];
            this.form.roleId = String(this.form.roleId);
            this.form.accountType = String(this.form.accountType);
            this.submitForm.province = this.form.areas[0];
            this.submitForm.city = this.form.areas[1];
            this.submitForm.area = this.form.areas[2];
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    submitFn(e) {
      if (this.form.accountType == 7) {
        this.form.contractImg = this.$refs.contractImg.submitUpload();
      }

      this.$refs[e].validate(valid => {
        // console.log(valid);
        if (valid) {
          if (!this.form.accountType) {
            this.$message({
              message: "账号类型不能为空",
              type: "success"
            });
            return;
          }
          // console.log(this.form.intoTime);
          if (this.radio == 1) {
            this.form.intoTime = new Date().format("yyyy-MM-dd hh:mm:ss");
            console.log(this.form.intoTime);
            // console.log(11, this.form.intoTime);
          }
          if (this.form.intoTime) {
            //   console.log(new Date(this.form.intoTime).getTime(),Date.now())
            // Date.now(this.form.intoTime) <   Date.now()
            if (
              (new Date(this.form.intoTime).getTime() < Date.now()) &
              (this.radio == 0)
            ) {
              this.$message({
                message: "不能小于当前时间"
              });
              return;
            }
          }
          // this.submitForm = {
          //   userId: Number(this.form.userId),
          //   roleId: Number(this.form.roleId),
          //   accountType: Number(this.form.accountType),
          //   intoTime: String(this.form.intoTime)
          //   // takeEffect: Number(this.radio)
          // };
          this.submitForm = { ...this.form };
          this.submitForm.userId = this.submitForm.userId - 0;
          this.submitForm.roleId = this.submitForm.roleId - 0;
          this.submitForm.accountType = this.submitForm.accountType - 0;
          this.submitForm.intoTime = this.submitForm.intoTime + "";
          if (this.form.areas.length > 0) {
            this.submitForm.province = this.form.areas[0];
            this.submitForm.city = this.form.areas[1];
            this.submitForm.area = this.form.areas[2];
          }
          const datas = this.submitForm;
          // console.log(JSON.stringify(this.submitForm));
          modifyUserServerRole(datas)
            .then(res => {
              if (!res.data.code) {
                this.$message({
                  message: "调整成功",
                  type: "success"
                });
                this.$router.push("/designerManageIndex");
              } else {
                this.$message.error(res.data.msg);
              }
              //    this.reload();
            })
            .catch(error => {
              this.$message.error(error);
            });
        }
      });
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 0px !important;
}
</style>
